/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\pages\StatementOfAccount\StatementOfAccountRecord\Unconfirmed\detail.tsx
 * @Date: 2022-03-16 09:23:07
 * @LastEditTime: 2022-08-16 16:51:31
 */

import React from 'react'
import { http, UdForm } from '@/lib'
import { Spin, Input, Select } from 'antd'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import apis from '@/apis/StatementOfAccount'
import FilesView from '@/components/FilesView'
import TextArea from 'antd/lib/input/TextArea'
const { Option } = Select
export default class UnconfirmedRecordDetail extends React.PureComponent<IProps, IState> {
  private RESULT_STATUS = {
    WRONG: '信息不符',
    RIGHT: '信息无误',
  }
  private SEAL_STATUS = {
    1: '是',
    0: '否',
  }
  private labelCol: object = { span: 3 }
  protected recordDetailForm: WrappedFormUtils<any>
  state: IState = {
    loading: false,
    recordDetail: {},
  }
  render() {
    const {
      loading,
      recordDetail,
      recordDetail: { modelUrl, modelName, letterName, replyUrl, replyFileName, project = [] },
    } = this.state
    let restFormItem = []
    for (let item of project) {
      restFormItem.push(
        <div className="ant-row ant-form-item ud-form-item" key={item.projectName} style={{ width: '100%' }}>
          <div className="ant-col ant-col-6 ant-form-item-label">
            <label htmlFor={item.projectName} title={item.projectName}>
              <span>{item.projectName}</span>
            </label>
          </div>
          <div className="ant-col ant-form-item-control-wrapper ant-col-18">
            <Input readOnly={true} value={item.value} style={{ width: '100%' }} />
          </div>
        </div>
      )
    }
    return (
      <Spin spinning={loading}>
        <UdForm
          labelCol={this.labelCol}
          getForm={form => (this.recordDetailForm = form)}
          values={recordDetail}
          items={[
            { id: 'letterName', label: '对账函名称', render: <Input readOnly={true} /> },
            { id: 'dealerCode', label: '经销商编码', render: <Input readOnly={true} /> },
            { id: 'dealerName', label: '经销商名称', render: <Input readOnly={true} /> },
            { id: 'modelName', label: '对账函模板', render: <Input readOnly={true} /> },
            { id: 'sendTime', label: '截止日期', render: <Input readOnly={true} /> },
            {
              id: 'calcFormula',
              label: '',
              render: <div>{restFormItem}</div>,
            },
            {
              id: 'replyConclusionOn',
              label: '回函结论',
              render: <Input readOnly={true} />,
            },
            {
              id: 'sealStatus',
              label: '是否盖章',
              render: <Input readOnly={true} />,
            },
            { id: 'replyName', label: '回函人', render: <Input readOnly={true} /> },
            { id: 'replyTime', label: '回函时间', render: <Input readOnly={true} /> },

            {
              label: '备注信息',
              id: 'replyConclusionTw',
              render: <TextArea rows={3} maxLength={200} readOnly={true} />,
            },
            {
              label: '回函附件',
              id: 'replyUrl',
              render: <FilesView fileUrl={replyUrl} fileName={replyFileName} />,
            },
            {
              label: '原对账函',
              id: 'modelUrl',
              render: (
                <div>
                  <FilesView fileUrl={modelUrl} fileName={letterName} />
                </div>
              ),
            },
          ]}
        />
      </Spin>
    )
  }

  componentDidMount() {
    this.getRecordDetail()
  }

  private getRecordDetail = () => {
    let {
      record: { letterLaunchId, brandCode, dealerCode },
    } = this.props
    let params = { letterLaunchId, brandCode, dealerCode }
    http.post(apis.getReconciliationDetail, params).then(res => {
      let { data = {} } = res
      data['replyConclusionOn'] = data?.['replyConclusionOn'] ? this.RESULT_STATUS[data['replyConclusionOn']] : ''
      data['sealStatus'] = data?.['sealStatus'] ? this.SEAL_STATUS[data['sealStatus']] : ''
      this.setState({ recordDetail: data })
    })
  }

  private onOk = e => {
    e.close()
  }
}

type Record = {
  letterLaunchId: number
  brandCode: string
  dealerCode: string
}

interface IProps {
  record: Record
}
interface IState {
  loading: boolean
  recordDetail: Partial<FileRecord>
}

interface FileRecord {
  id: number
  letterName: string
  modelUrl: string
  replyUrl: string
  project: any[]
  [key: string]: any
}
